import createElement from './element.js'
import './main.css'

import jpg from './test.jpg'

const element = document.createElement('div')
  element.textContent = "Hello"
  element.className = 'container'
  element.id = 'container'
  element.addEventListener('click', () => {
    console.log("Hello")
  })

const dom = createElement()

element.appendChild(dom)
document.body.append(element)


const img = new Image()
img.src = jpg
document.body.appendChild(img)

// 这是打包的入口文件，也就是在这个模块中才加载其它模块，就是因为这个文件中使用了其它导入的模块
// 一旦模块更新之后，就需要重新使用这些模块，所以应该在这个文件处理其它模块的热替换

// hmr 为 module 提供了一个 hot 属性，它就是 hmr api 的核心对象
//      它提供了一个 accept 方法用于注册模块更新后的处理函数
//      accept 接收两个参数，第一个参数是模块路径，第二个是处理函数
if(module.hot){
    let input = dom
    module.hot.accept('./element.js',()=>{
        const value = input.value // 解决模块更新后 value 丢失问题
        element.removeChild(input)
        input = createElement()
        input.value = value
        input.id = 'id-input' // 加个id 测试
        // element.appendChild(input1) // 如果代码有误
        element.appendChild(input)
    })
    // 可以通过画板修改保存查看
    module.hot.accept('./test.jpg',()=>{
       img.src = jpg
       img.id = 'id-image'
    })
}




